<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Novels</title>
    <link href="style/novels.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <div id="top">
        <div class="content">
            <a href="jsps/user/index.jsp">进入购物系统</a>
        </div>
    </div>

    <div id="header">
        <div id="title">
            <h1>书虫之家</h1>
        </div>
        <div id="search">
            <form action="#" method="get">
                <input type="text" name="keyword" value="请输入你要查找的书籍" class="txt">
                <input type="submit" name="search" value="搜索" class="submit">
            </form>
        </div>
    </div>

    <div id="menu">
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="#" class="selected">书城中心</a></li>
            <li><a href="rank.html">畅销榜单</a></li>
            <li><a href="#">阅读社区</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="problems.html">常见问题</a></li>
        </ul>
    </div>


    <div id="container">
        <div id="main">
            <div id="sidebar" class="float_l">
                <div class="sidebar_box">
                    <h2>分类&nbsp;|&nbsp;&nbsp;小说</h2>
                    <div class="content">
                        <ul class="sidebar_list">
                            <li><a href="#">世界名著</a></li>
                            <li><a href="#">中国古典小说</a></li>
                            <li><a href="#">科幻小说</a></li>
                            <li><a href="#">侦探/悬疑/推理</a></li>
                            <li><a href="#">成功励志</a></li>
                            <li><a href="#">惊悚/恐怖</a></li>
                            <li><a href="#">武侠小说</a></li>
                            <li><a href="#">职场小说</a></li>
                        </ul>
                    </div>
                </div>

                <div class="sidebar_box">
                    <h3>新书上架</h3>
                    <div class="box_d">
                        <a href="1984.html"><img src="img/1984.jpg" alt="1984"></a>
                        <h4><a href="1984.html">1984</a></h4><h5>[英]乔治·奥威尔</h5>
                        <div class="cleaner"></div>
                    </div>
                    <div class="box_d">
                        <a href="#"><img src="img/renjianshige.jpg" alt="人间失格"></a>
                        <h4><a href="#">人间失格</a></h4><h5>[日]太宰治</h5>
                        <div class="cleaner"></div>
                    </div>
                    <div class="box_d">
                        <a href="#"><img src="img/huozhe.jpg" alt="活着"></a>
                        <h4><a href="#">活着</a></h4><h5>[中]余华</h5>
                        <div class="cleaner"></div>
                    </div>
                </div>
            </div>

            <div id="content" class="float_r">
                <div class="header">
                    <div class="head-l">
                        <h2>小说</h2>
                    </div>
                    <div class="head-r">
                        <ul>
                            <li><a href="#" class="selected">最流行</a></li>
                            <li><a href="#">经典畅读</a></li>
                            <li><a href="#">最近上新</a></li>
                        </ul>
                    </div>
                </div>
                <div class="cleaner"></div>
                <div class="box-l">
                    <img src="img/shengdian.jpg" alt="圣殿春秋">
                    <h4><a href="#">圣殿春秋</a></h4>
                    <h5>（英）肯·福莱特 </h5>
                    <div class="price">¥159.80</div>
                </div>
                <div class="box-m">
                    <img src="img/baiduren.jpg" alt="摆渡人">
                    <h4><a href="#">摆渡人</a></h4>
                    <h5>（英）克莱儿·麦克福</h5>
                    <div class="price">¥32.10</div>
                </div>
                <div class="box-r">
                    <img src="img/santi.jpg" alt="三体">
                    <h4><a href="#">三体</a></h4>
                    <h5>刘慈欣</h5>
                    <div class="price">¥46.80</div>
                </div>

                <div class="box-l">
                    <img src="img/dilezhi.jpg" alt="滴泪痣">
                    <h4><a href="#">滴泪痣</a></h4>
                    <h5>李修文</h5>
                    <div class="price">¥45.60</div>
                </div>
                <div class="box-m">
                    <img src="img/huozhe2017.jpg" alt="活着（2017新版）">
                    <h4><a href="#">活着（2017新版）</a></h4>
                    <h5>余华</h5>
                    <div class="price">¥28.00</div>
                </div>
                <div class="box-r">
                    <img src="img/lengchang.jpg" alt="冷场">
                    <h4><a href="#">冷场</a></h4>
                    <h5>李诞</h5>
                    <div class="price">¥27.30</div>
                </div>

                <div class="box-l">
                    <img src="img/xiao.jpg" alt="小小小小的火">
                    <h4><a href="#">小小小小的火</a></h4>
                    <h5>（美）伍绮诗</h5>
                    <div class="price">¥44.20</div>
                </div>
                <div class="box-m">
                    <img src="img/xingchen.jpg" alt="星尘">
                    <h4><a href="#">星尘</a></h4>
                    <h5>（英）尼尔·盖曼</h5>
                    <div class="price">¥33.90</div>
                </div>
                <div class="box-r">
                    <img src="img/diqitian.jpg" alt="第七天">
                    <h4><a href="#">第七天</a></h4>
                    <h5>余华</h5>
                    <div class="price">¥25.00</div>
                </div>
            </div>
            <div class="cleaner"></div>
        </div>

        <div id="footer">
            Copyright &copy; 2019书虫之家 All Rights Reserved
        </div>
    </div>
</div>
</body>
</html>
